<!-- 我要买房 二手房列表 -->
<template>
	<view>
		<view class="u-rela">
			<!-- 自定义顶部导航 -->
			<u-navbar :safeAreaInsetTop="true" bgColor="transparent">
				<view slot="left" class="u-flex">
					<view class="u-flex m-flex-no u-flex-y-center u-m-r-30" @click="nextNav('/pages/room/search?type=2')">
						<u-icon name="dingwei" customPrefix="master" size="18"></u-icon>
						<view class="u-m-l-10">{{ city }}</view>
					</view>
					<view class="u-flex-1">
						<u-search placeholder="你想找哪里呢？" bgColor="#fff" v-model="keyword" :show-action="false" @click="nextNav('/pages/room/search?type=2')" :disabled="true"></u-search>
					</view>
				</view>
			</u-navbar>
			<view class="boxheight m-bg-w">
				<view class="m-mg-lr">
					<view class="m-mg-lr u-flex u-flex-between boxrow">
						<view class="u-flex" v-for="(item, index) in list" :key="index" @click="requestStatus ? gettabClick(index) : ''">
							<view>
								<text class="u-font-24" :class="cut === index ? 'ch' : 'c5'">{{ item.name }}</text>
							</view>
							<view class="u-m-t-8 u-m-l-10"><u-icon :name="item.icon" size="12" color="#cecccc"></u-icon></view>
						</view>
					</view>
				</view>
			</view>
			<view class="m-popup">
				<u-popup
					:show="show"
					:overlay="true"
					:duration="0"
					mode="top"
					height="200rpx"
					:customStyle="{ top: popupTop - 5 + 'px' }"
					:overlayStyle="{ zIndex: '18' }"
					@close="close"
					zIndex="19"
					:closeOnClickOverlay="true"
				>
					<!-- 区域 -->
					<view class="boxgu">
						<view class="" v-if="cut === 0">
							<view class="u-flex u-flex-between u-flex-1 m-mg-lr">
								<view class="w_33">
									<view class="u-m-t-30" v-for="(item, index) in cityall" :class="cut0 === index ? 'itemon' : ''" :key="index" @click="getxuancity(index, item, '1')">
										{{ item.name }}
									</view>
								</view>
								<view class="w_33">
									<view class="u-m-t-30" v-for="(item, index) in cityallchild" :class="cityind === index ? 'itemon' : ''" :key="index" @click="getxuancity(index, item, '2')">
										{{ item.name }}
									</view>
								</view>
								<view class="w_33">
									<view class="u-m-t-30" v-for="(item, index) in cityallchildchild" :class="citychid === index ? 'itemon' : ''" :key="index" @click="getxuancity(index, item, '3')">
										{{ item.name }}
									</view>
								</view>
							</view>
						</view>
						<!-- 价格 -->
						<view class="cut1-item c62" v-if="cut === 1 || cut === 2 || cut === 4">{{ params.title }}</view>
						<view class="u-flex u-flex-wrap u-m-t-30" v-if="cut === 1 || cut === 2 || cut === 4">
							<view class="cut2-item" v-if="cut === 1" :class="cut1 === index ? 'item-on' : ''" v-for="(item, index) in params.list" :key="index" @click="getin(index, item, cut)">
								<text>{{ item.label }}</text>
							</view>
							<view class="cut2-item" v-if="cut === 2" :class="cut2 === index ? 'item-on' : ''" v-for="(item, index) in params.list" :key="index" @click="getin(index, item, cut)">
								<text>{{ item.label }}</text>
							</view>
							<view class="cut2-item" v-if="cut === 4" :class="cut4 === index ? 'item-on' : ''" v-for="(item, index) in params.list" :key="index" @click="getin(index, item, cut)">
								<text>{{ item.label }}</text>
							</view>
						</view>
						<view class="" v-if="cut === 3">
							<view class="cut1-item c62">更多选项</view>
							<view class="u-m-t-30 m-mg-lr">
								<view class="u-flex u-m-b-20" v-for="(item, index) in listdata" :key="index">
									<view class="w_30 u-m-t-15">{{ item.name }}</view>
									<view class="u-m-l-30 u-flex u-flex-wrap w_70">
										<view class="cut2-item" :class="it.bool ? 'item-on' : ''" v-for="(it, ind) in item.child" :key="ind" @click="goduo(index, ind)">
											<text>{{ it.name }}</text>
										</view>
									</view>
								</view>
								<view class="u-flex">
									<view class="w_30 u-m-t-15">有无电梯:</view>
									<view class="u-m-l-30 u-flex u-flex-wrap w_70">
										<view class="cut2-item" :class="yw === 1 ? 'item-on' : ''" @click="yw = 1"><text>有</text></view>
										<view class="cut2-item" :class="yw === 2 ? 'item-on' : ''" @click="yw = 2"><text>无</text></view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view style="height: 20rpx; background-color: #fff; margin-top: 10rpx;"></view>
					<view class="u-flex boxbottom">
						<view class="u-flex-1" @click="Reset"><view class="button-one">重置</view></view>
						<view class="u-flex-1" @click="requestStatus ? determine() : ''"><view class="button-two">确定</view></view>
					</view>
				</u-popup>
			</view>
			<view class="u-m-t-80">
				<view class="heighly">
					<!-- <list-groups :list="dataList" :listHighly="highly"></list-groups> -->
					<ershoufangnewlist :list="dataList" :listHighly="highly"></ershoufangnewlist>
				</view>
			</view>
			<view style="height: 55px;"></view>
			<u-picker
				:show="regionShow"
				keyName="name"
				:columns="[getcity]"
				@cancel="regionShow = false"
				@confirm="confirm"
				:closeOnClickOverlay="true"
				@close="regionShow = false"
			></u-picker>
			<view :style="{ height: 55 + sys.bottom + 'px' }"></view>
			<tabbar ref="tabbar" @newObj="newObj"></tabbar>
			<u-loading-page loading-text="内当家APP" :loading="pageLoad"></u-loading-page>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			yw: 0,
			bannerlist: [],
			getcity: [],
			cut: 0,
			cut0: null,
			cut1: null,
			cut2: null,
			cut3: null,
			regionShow: false,
			cut4: null,
			cutname0: null,
			cutname1: null,
			cutname2: null,
			cutname3: null,
			cutname4: null,
			geng1: [],
			params: {},
			listdata: [
				{
					name: '建筑面积:',
					child: [
						{
							name: '40m²',
							bool: false
						},
						{
							name: '40-60m²',
							bool: false
						},
						{
							name: '60-80m²',
							bool: false
						},
						{
							name: '80-100m²',
							bool: false
						},
						{
							name: '100-120m²',
							bool: false
						},
						{
							name: '120-144m²',
							bool: false
						},
						{
							name: '144-200m²',
							bool: false
						},
						{
							name: '200m²以上',
							bool: false
						}
					]
				},
				{
					name: '房源特色:',
					child: [
						{
							name: '满五年',
							bool: false
						},
						{
							name: '满两年',
							bool: false
						},
						{
							name: '随时看房',
							bool: false
						}
					]
				},
				{
					name: '朝向:',
					child: [
						{
							name: '南北',
							bool: false
						},
						{
							name: '朝南',
							bool: false
						},
						{
							name: '朝东',
							bool: false
						},
						{
							name: '朝北',
							bool: false
						},
						{
							name: '朝西',
							bool: false
						}
					]
				},
				{
					name: '楼龄:',
					child: [
						{
							name: '5年内',
							bool: false,
							num: 5
						},
						{
							name: '10年内',
							bool: false,
							num: 10
						},
						{
							name: '15年内',
							bool: false,
							num: 15
						},
						{
							name: '20年内',
							bool: false,
							num: 20
						},
						{
							name: '20年以上',
							bool: false,
							num: '20 年以上'
						}
					]
				},
				{
					name: '装修:',
					child: [
						{
							name: '豪华装修',
							bool: false
						},
						{
							name: '精装修',
							bool: false
						},
						{
							name: '普通装修',
							bool: false
						},
						{
							name: '毛坯房',
							bool: false
						}
					]
				},
				{
					name: '用途:',
					child: [
						{
							name: '住宅',
							bool: false
						},
						{
							name: '别墅',
							bool: false
						},
						{
							name: '写字楼',
							bool: false
						},
						{
							name: '商铺',
							bool: false
						},
						{
							name: '四合院',
							bool: false
						},
						{
							name: '车位',
							bool: false
						},
						{
							name: '其他',
							bool: false
						}
					]
				}
			],
			popupTop: 0,
			show: false,
			list: [
				{
					name: '区域',
					icon: 'arrow-down-fill'
				},
				{
					name: '价格',
					icon: 'arrow-down-fill'
				},
				{
					name: '房型',
					icon: 'arrow-down-fill'
				},
				{
					name: '更多',
					icon: 'arrow-down-fill'
				},
				{
					name: '排序',
					icon: 'arrow-down-fill'
				}
			],
			cityind: 0,
			citychid: 0,
			cityindname: '', //城市
			citychildname: '', // 区域
			cityallchild: [
				{
					name: '不限'
				}
			],
			cityallchildchild: [
				{
					name: '不限'
				}
			],
			cityall: []
		};
	},
	async onLoad() {
		let cityall = uni.getStorageSync('cityall');
		if(cityall){
			this.cityall = JSON.parse(cityall);
		}
		this.getcity = await this.require('getcity');
		this.getcity.unshift({
			id: 0,
			name: '不限'
		});
		this.city = this.getcity[1] ? this.getcity[1].name : '东莞市';
		let city = uni.getStorageSync('city');
		if (city) {
			this.city = city;
		}
		this.path = 'towhouselist';
		this.params = {
			...this.params,
			pnum: this.pnum,
			city: this.city
		};
		await this.getList();
		this.bannerlist = await this.require('bannerlist');
		if (this.pageLoad) {
			setTimeout(() => {
				this.pageLoad = false;
			}, 1000);
		}
	},
	onReady() {
		this.sumHeight('.m-popup');
	},
	methods: {
		async confirm(e) {
			this.city = e;
			uni.setStorageSync('city', this.city);
			this.path = 'towhouselist';
			this.params = {
				...this.params,
				pnum: this.pnum,
				city: this.city
			};
			await this.getList();
		},
		getxuancity(ind, item, key) {
			switch (+key) {
				case 1:
					this.cityind = 0;
					this.citychid = 0;
					this.cut0 = ind;
					this.cityallchild = item.child;
					this.cityallchildchild = this.cityallchild[0].child;
					this.citychildname = item.child[0].child[0].name;
					this.cityindname = item.child[0].name;
					break;
				case 2:
					this.citychid = 0;
					this.cityind = ind;
					this.cityallchildchild = item.child;
					this.cityindname = item.name;
					this.citychildname = item.child[0].name;
					break;
				case 3:
					this.citychid = ind;
					this.citychildname = item.name;
					break;
				default:
					break;
			}
		},
		//重置
		Reset() {
			this.cut1 = null;
			this.cut2 = null;
			this.cut0 = 0;
			this.cut4 = null;
			this.yw = null;
			this.cityind = 0;
			this.citychid = 0;
			this.cityindname = '不限';
			this.citychildname = '不限';
			this.listdata.map((p, i) => {
				p.child.map((a, b) => {
					a.bool = false;
				});
			});
		},
		//确定
		async determine() {
			this.requestStatus = false;
			this.show = false;
			this.dataList = [];
			let roomnature = ''; //用途
			let style = ''; //装修
			let years = ''; //楼龄
			let orientation = ''; //朝向
			let characteristic = ''; //特色
			let area = ''; //面积小 1
			let areamax = ''; //面积大 1
			this.listdata.map((p, i) => {
				p.child.map((a, b) => {
					if (a.bool) {
						if (i === 0) {
							if (b === 0) {
								area = 40;
							} else if (b === 7) {
								areamax = '200以上';
							} else if(0 < b < 7) {
								area = a.name.split('-')[0] * 1;
								if (!a.name.split('-')[1]) return;
								areamax = a.name.split('-')[1].split('m²')[0] * 1;
							}
						}
						i === 1 ? (characteristic += a.name + '/') : '';
						i === 2 ? (orientation += a.name + '/') : '';
						i === 4 ? (style += a.name + '/') : '';
						i === 5 ? (roomnature += a.name + '/') : '';
						i === 3 ? (years = a.bool ? a.name : '') : '';
					}
				});
			});
			let par = {};
			if(years){
				if (years != '20年以上'){
					 years = years.split('年内')[0] * 1;
				}else{
					years = '20年以上';
				};
			}
			//总价切
			if (this.cut1 != null) {
				if (this.cut1 === 0) {
					par.price = '500000以下';
				} else if (this.cut1 === 6) {
					par.pricemax = '5000000以上';
				} else if (0 < this.cut1 < 6) {
					par.price = this.cutname1.split('-')[0] * 10000;
					par.pricemax = this.cutname1.split('-')[1].split('万')[0] * 10000;
				}
			}
			this.city = this.cityindname || this.city;
			this.params = {
				p: 1,
				city: this.city === '不限' ? '':this.city,
				pnum: this.pnum,
				areaname: this.citychildname === '不限' ? '' : this.citychildname,
				price: par.price || '',
				pricemax: par.pricemax || '',
				bedroom: this.cut2 < 5 && this.cut2 ? this.cut2 + 1 : '',
				bedroommax: this.cut2 === 5 && this.cut2 ? this.cut2 + 1 : '',
				priceasc: this.cut4 == null ? '' : (this.cut4 === 1 ? 1 : 0),
				pricedesc: this.cut4 == null ? '' : this.cut4 === 2 ? 1 : 0,
				areadesc: this.cut4 == null ? '' : this.cut4 === 4 ? 1 : 0,
				areaasc: this.cut4 == null ? '' : this.cut4 === 3 ? 1 : 0,
				elevator: this.yw === 1 ? '有电梯' : this.yw === 2 ? '无电梯' : '',
				roomnature: roomnature.slice(0, roomnature.length - 1),
				style: style.slice(0, style.length - 1),
				years:years||years,
				orientation: orientation.slice(0, orientation.length - 1),
				characteristic: characteristic.slice(0, characteristic.length - 1),
				area,
				areamax
			};
			for (let var1 in this.params) {
				if (!this.params[var1]) {
					delete this.params[var1];
				}
			}
			await this.getList();
			this.requestStatus = true;
		},
		close() {
			this.show = false;
		},
		getin(index, item, cut) {
			this['cut' + this.cut] = index;
			if (this.cut != 0) {
				this['cutname' + cut] = item.label;
			}
		},
		goduo(index, ind) {
			if (index === 0 || index === 3) {
				this.listdata[index].child.map((p, i) => {
					if (p.bool) {
						if (i != ind) {
							p.bool = false;
						}
					}
				});
				this.listdata[index].child[ind].bool = !this.listdata[index].child[ind].bool;
			} else {
				let a = 0;
				this.listdata[index].child.map((p, i) => {
					if (p.bool) {
						a++;
					}
				});
				if (a === 3) {
					this.listdata[index].child[ind].bool = false;
				} else {
					this.listdata[index].child[ind].bool = !this.listdata[index].child[ind].bool;
				}
			}
		},
		gettabClick(index) {
			this.requestStatus = false;
			this.cut = index;
			this.show = true;
			this.params = {};
			switch (index) {
				case 0:
					this.cityall.map((p, i) => {
						p.child.map((a, b) => {
							if (this.city == a.name) {
								this.cut0 = i;
								this.cityallchild = p.child;
								this.cityallchildchild = a.child;
								this.cityind = b;
								this.citychildname = a.child[0].name
							}
						});
					});
					break;
				case 1:
					this.params = {
						title: '价格区间（万）：',
						list: [
							{
								id: 1,
								label: '50万以下'
							},
							{
								id: 2,
								label: '50-99万'
							},
							{
								id: 3,
								label: '100-150万'
							},
							{
								id: 4,
								label: '150-200万'
							},
							{
								id: 5,
								label: '200-300万'
							},
							{
								id: 6,
								label: '300-500万'
							},
							{
								id: 4,
								label: '500万以上'
							}
						]
					};
					break;
				case 2:
					this.params = {
						title: '房型：',
						list: [
							{
								id: 1,
								label: '一室'
							},
							{
								id: 2,
								label: '二室'
							},
							{
								id: 3,
								label: '三室'
							},
							{
								id: 4,
								label: '四室'
							},
							{
								id: 5,
								label: '五室'
							},
							{
								id: 6,
								label: '五室以上'
							}
						]
					};
					break;
				case 4:
					this.params = {
						title: '排序',
						list: [
							{
								id: 1,
								label: '默认排序'
							},
							{
								id: 3,
								label: '总价从低到高'
							},
							{
								id: 4,
								label: '总价从高到低'
							},
							{
								id: 5,
								label: '面积从小到大'
							},
							{
								id: 6,
								label: '面积从大到小'
							}
						]
					};
					break;
				default:
					break;
			}
			this.requestStatus = true;
		},
		// 计算高度
		sumHeight(element) {
			let _this = this;
			let win_height = 0;
			const query = uni.createSelectorQuery();
			query.select(element).boundingClientRect();
			query.selectViewport().scrollOffset();
			query.exec(function(res) {
				if (res[0]) {
					_this.popupTop = res[0].top + 37;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.boxheight {
	height: 64rpx;
	position: absolute;
	left: 0;
	right: 0;
	z-index: 20;
}

.w_33 {
	width: 32%;
	height: 450rpx;
	overflow-y: auto;
}

.w_30 {
	width: 20%;
	text-align: right;
}

.w_70 {
	width: 80%;
}

.boxgu {
	height: 450rpx;
	overflow-y: auto;
	background-color: #f2f2f2;
}

.c62 {
	color: #636262;
}

.ch {
	color: #dbb07b;
}

.boxbottom {
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
}

.c5 {
	color: #5a5a5a;
}

.button-two {
	color: white;
	text-align: center;
	background-color: #0e5642;
	line-height: 60rpx;
	height: 60rpx;
}

.button-one {
	color: #646262;
	text-align: center;
	line-height: 60rpx;
	height: 60rpx;
}

.boxrow {
	align-items: center;
	height: 64rpx;
}

.itemon {
	color: #0e5642;
	font-size: 32rpx;
}

.cut1-item {
	text-indent: 2em;
	height: 60rpx;
	line-height: 60rpx;
	background-color: #fff;
}

.cut3-item {
	height: 60rpx;
	line-height: 60rpx;
	text-indent: 2em;
	color: #606060;
}

.cut2-item {
	display: inline-block;
	padding: 0 30rpx;
	background-color: #fff;
	border-radius: 10rpx;
	height: 60rpx;
	line-height: 60rpx;
	margin-left: 25rpx;
	margin-bottom: 20rpx;
	color: #606060;
}

.item-on {
	background-color: #0e5642 !important;
	color: #ffffff;
}
</style>
